<template>
	<view>
		<wrapBgImgVue
			bgImg="goods/goods_top.png"
		/>
		
		<navigationBarVue
			:bgImgType="1"
			navigationTitle="我的团队"
			@onTotalHeight="onTotalHeight"
		/>
		
		<view class="wrap safe-area"
			:style="'padding-top: calc(' + (topHeight) + 'px) !important;'"
		>
			<view class="head-box">
				<view class="title">团队总人数（人）</view>
				<view class="sbw">
					<view class="money">
						{{ total }}
					</view>
				</view>
			</view>
			
			<view>
				<block v-for="(item, index) in list" :key="index">
					<view class="list-con">
						<view class="user-con">
							<image
								mode="aspectFill"
								:src="$wanlshop.oss(item.avatar)"
							/>
								
							<view class="user-box">
								<view class="user-name">
									{{ item.nickname }}
								</view>
								
								<view class="user-time">
									{{ $filters.onTimeStringChangeDate(item.jointime) }}
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import { TeamList } from "../API/team.js";
	
	import navigationBarVue from "../components/navigationBar/navigationBar.vue";
	import wrapBgImgVue from "../components/navigationBar/bgImg.vue";
	
	export default {
		components: {
			wrapBgImgVue,
			navigationBarVue,
		},
		data() {
			return {
				topHeight: 0, //顶部高度
				
				page: 1,
				total: 0,
				list: [],
			}
		},
		onLoad() {
			this.onRefresh();
		},
		onPullDownRefresh() {
			this.onRefresh();
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.page++;
				this.getData();
			}
		},
		methods: {
			/**
			 * 顶部高度
			 */
			onTotalHeight(height) {
				this.topHeight = height;
			},
			
			/**
			 * 刷新
			 */
			onRefresh() {
				this.page = 1;
				this.list = [];
				this.getData();
			},
			/**
			 * 网络请求
			 */
			getData() {
				TeamList(this.page).then(res => {
					this.total = res.data.total;
					const list = res.data.data;
					if (this.page == 1) {
						this.list = list;
					} else {
						this.list = this.list.concat(list);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.head-box {
		width: 670rpx;
		margin-left: 40rpx;
		padding: 62rpx 0;

		.title {
			font-size: 26rpx;
			color: #333333;
		}

		.sbw {
			width: 670rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 10rpx;

			.money {
				font-size: 70rpx;
				color: #333333;
			}

			.out {
				width: 159rpx;
				height: 52rpx;
				border-radius: 50rpx;
				background: #84BD00;
				color: #fff;
				font-size: 24rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}

	.list-con {
		width: 690rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-left: 30rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		padding: 35rpx 0;

		.user-con {
			margin-left: 30rpx;
			display: flex;
			align-items: center;

			image {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				border: 2px solid #84BD00;
			}

			.user-box {
				margin-left: 27rpx;

				.user-name {
					font-size: 30rpx;
					color: #3D3D3D;
				}

				.user-time {
					font-size: 26rpx;
					color: #999999;
					margin-top: 18rpx;
				}
			}
		}

		.user-money-black {
			font-size: 36rpx;
			color: #84BD00;
			margin-right: 30rpx;
		}

		.user-money-white {
			font-size: 36rpx;
			color: #DBDBDB;
			margin-right: 30rpx;
		}
	}
</style>